<template>
  <el-form ref="refDataCardFrom" label-position="top" :model="form.model" class="demo">
    <div class="form-section">
      <div class="form-section_title">关联数据卡信息</div>
      <AgelFormDesc :items="form.baseItems" :column="24"> </AgelFormDesc>
    </div>
  </el-form>
</template>

<script setup name="StationDataCardDetail" lang="tsx">
import { getDataCardByDevice } from '@/api/station/dataCard/index'; // TODO 替换为根据设备ID查询数据卡信息
import { defaultModel } from '@/api/station/dataCard/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { data_card_type, data_card_status } = toRefs<any>(proxy?.useDict('data_card_status', 'data_card_type'));

const props = defineProps({
  deviceId: [String, Number]
})

const form = reactive({
  model: defaultModel(),
  baseItems: [
    { prop: "cardNo", label: "卡号", span: 6 },
    {
      prop: "cardType", label: "类型", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<dict-tag options={data_card_type.value} value={form.model[prop]} />)
      }
    },
    { prop: "expireTime", label: "有效期至", span: 6 },
    { prop: "restDays", label: "剩余天数", span: 6 },
    {
      prop: "status", label: "状态", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<dict-tag options={data_card_status.value} value={form.model[prop]} />)
      }
    },
  ],
})
const loading = ref(false)

const getInfo = async (id: string | number) => {
  loading.value = true
  let res = await getDataCardByDevice(id)
  loading.value = false
  if (res.code == 200) {
    form.model = res.data
  } else {
    proxy?.$modal.msgError(res.msg || '获取信息失败！')
  }
}
onMounted(() => {
  if (props.deviceId) {
    getInfo(props.deviceId)
  }
})
</script>
